import React, { useState, memo } from 'react';
import { Layout, Menu } from 'antd';
import { Link } from 'umi';
import golbalConfig from '@/config';
import './index.less';
const { Header, Content, Footer } = Layout;
const { footerText } = golbalConfig;

export default memo(function CustomLayout(props) {
  const [selectedKeys, setSelectedKeys] = useState(['index']);
  return (
    <Layout className="custom-layout-wrap">
      <Header className="custom-layout-header-wrap">
        <Menu
          className="custom-layout-header-content"
          theme="dark"
          mode="horizontal"
          selectedKeys={selectedKeys}
          onSelect={(obj) => setSelectedKeys(obj.selectedKeys)}
        >
          <Menu.Item key="article">
            <Link to="/blog/custom/article">文章列表</Link>
          </Menu.Item>
          <Menu.Item key="index">
            <Link to="/blog/custom/overview">概览</Link>
          </Menu.Item>
        </Menu>
      </Header>
      <Content className="custom-layout-content-wrap">
        <div className="custom-layout-content">
          {/*局部路由切换实现*/}
          {props.children}
          {/*局部路由切换实现*/}
        </div>
      </Content>
      {footerText ? (
        <Footer style={{ textAlign: 'center' }}>{footerText}</Footer>
      ) : (
        ''
      )}
    </Layout>
  );
});

// export default class CustomLayout extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       selectedKeys: ['article'],
//     };
//   }
//   setSelectedKeys = (obj) => {
//     this.setState({
//       selectedKeys: obj.selectedKeys,
//     });
//   };
//   render() {
//     const { selectedKeys } = this.state;
//     return (
//       <Layout className="custom-layout-wrap">
//         <Header className="custom-layout-header-wrap">
//           <Menu
//             className="custom-layout-header-content"
//             theme="dark"
//             mode="horizontal"
//             selectedKeys={selectedKeys}
//             onSelect={this.setSelectedKeys}
//           >
//             <Menu.Item key="article">
//               <Link to="/blog/custom/article">文章列表</Link>
//             </Menu.Item>
//             <Menu.Item key="index">
//               <Link to="/blog/custom/overview">概览</Link>
//             </Menu.Item>
//           </Menu>
//         </Header>
//         {/* <Breadcrumbs breadcrumbs={RoutersArray} /> */}
//         <Content className="custom-layout-content-wrap">
//           <div className="custom-layout-content">
//             {/*局部路由切换实现*/}
//             {this.props.children}
//             {/*局部路由切换实现*/}
//           </div>
//         </Content>
//         <Footer style={{ textAlign: 'center' }}>蜀ICP备2020028876号</Footer>
//       </Layout>
//     );
//   }
// }
